<template>
    <div app-container>

        <el-row type="flex" justify="center">
            <el-col :span="20">
                <div align="center" style="background-color: lightgray;height: 60px;">
                    <div>
                        <span id="mainTitle">催收详情</span>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="24" class="mb8" justify="center" type="flex">
            <el-col :span="20">
                <el-description class="con" :column="3" border>
                    <p class="title">催收信息</p>
                    <el-divider></el-divider>
                </el-description>
                <el-col :span="20">
                    <span>催收人员: <span>{{billInfo.collectorName}}</span></span>
                    <span style="position: absolute;left: 30%;">催收状态: <span>{{this.progressStatus}}</span></span>
                    <span style="position: absolute;left: 60%;">委派催收时间:
                        <span>{{ billInfo.collectTime }}</span>
                    </span>
                    <br /><br />
                </el-col>
                <el-col :span="20">
                    <span>催收备注: <span>{{billInfo.collectionLog}}</span></span>
                </el-col>
            </el-col>
        </el-row>

        <el-row :gutter="24" class="mb8" justify="center" type="flex">
            <el-col :span="20">
                <el-description class="con" :column="3" border>
                    <p class="title">帐单信息</p>
                    <el-divider></el-divider>
                </el-description>
                <el-table v-loading="loading" :data="billOrders">
                    <el-table-column label="内容" align="center" prop="collectionLog" />
                    <el-table-column label="记录时间" align="center" prop="writeTime" />
                    <el-table-column label="操作人员" align="center" prop="operator.nickName" />
                </el-table>
            </el-col>
        </el-row>

        <el-row :gutter="24" class="mb8" justify="center" type="flex">
            <el-col :span="20">
                <el-description class="con" :column="3" border>
                    <p class="title">催收记录</p>
                    <el-divider></el-divider>
                </el-description>
                <el-table v-loading="loading" :data="billListInfo">
                    <el-table-column label="期数" align="center" prop="periods" />
                    <el-table-column label="待还金额" align="center" prop="essentialPayment" />
                    <el-table-column label="罚息" align="center" prop="delayPaybackMoney" />
                    <el-table-column label="还款状态" align="center" prop="paymentStatus" />
                    <el-table-column label="逾期天数" align="center" prop="delayDays" />
                    <el-table-column label="应还款日期" align="center" prop="essentialPayDeadline" />
                </el-table>
            </el-col>
        </el-row>

        <el-row :gutter="24" class="mb8" justify="center" type="flex">
            <el-col :span="20">
                <el-description class="con" :column="3" border>
                    <p class="title">客户信息</p>
                    <el-divider></el-divider>
                </el-description>
                <el-col :span="20">
                    <span>客户姓名: <span>{{this.client.clientName}}</span></span>
                    <span style="position: absolute;left: 30%;">客户身份证号:
                        <span>{{this.client.citizenIdentity}}</span></span>
                    <span style="position: absolute;left: 60%;">客户手机号:
                        <span>{{ this.client.phone }}</span>
                    </span>
                    <br /><br />
                </el-col>
                <el-col :span="20">
                    <span>贷款产品: <span>{{this.production.productionName}}</span></span>
                </el-col>
            </el-col>
        </el-row>

        <el-row :gutter="24" class="mb8" justify="center" type="flex">
            <el-col :span="20">
                <div v-for="(one, index) in allData" :key="index" :model="activeNames">
                    <el-descriptions
                        v-if="one.title != '驾驶证信息' && one.title != '申请信息' && one.title != '借款信息' && one.viewDetails.length != 0"
                        :title="one.title" name="1" class="con" :column="3" border>
                        <template slot="title">
                            <p class="title">{{ one.title }}</p>
                        </template>
                        <el-descriptions-item v-for="(oneone, index1) in one.viewDetails" :key="index1"
                            :label="oneone.fieldName" label-class-name="my-label">
                            <div v-if="oneone.fieldType != 'pictrue'">
                                <span>{{oneone.value}}</span>
                            </div>
                            <div v-else-if="oneone.fieldType == 'pictrue'">
                                <el-image style="width: auto; height: auto"
                                    src="@views/production/collaborativeProduct/1561390725417.jpeg" />
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-col>
        </el-row>

        <el-dialog title="添加催收记录" :visible.sync="addDialogStatus" width="600px" top="30vh" append-to-body>
            <el-form label-width="80px">
                <!-- 渠道商信息 -->
                <el-row>
                    <el-col :span="24">
                        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="addTextarea">
                        </el-input>
                    </el-col>
                </el-row>
                <br /><br />
                <el-divider></el-divider>
                <el-row>
                    <el-col>
                        <el-button style="position:absolute; left: 250px;" v-hasPermi="['system:post:remove']"
                            size="mini" type="primary" icon="el-icon-edit" @click="saveRecord">确认</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

        <el-dialog title="客户备注" :visible.sync="addRemarkDialogStatus" width="600px" top="30vh" append-to-body>
            <el-form label-width="80px">
                <!-- 渠道商信息 -->
                <el-row>
                    <el-col :span="24">
                        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="addRemarkTextarea">
                        </el-input>
                    </el-col>
                </el-row>
                <br /><br />
                <el-divider></el-divider>
                <el-row>
                    <el-col>
                        <el-button style="position:absolute; left: 250px;" v-hasPermi="['system:post:remove']"
                            size="mini" type="primary" icon="el-icon-edit" @click="saveRemark">确认</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

        <el-row :gutter="24" class="mb8" justify="center" type="flex">
            <el-col :span="20">
                <div style="margin-right: 50px;" class="fixed-button">
                    <el-button type="primary" icon="el-icon-success" size="mini" @click="addRemark">客户备注</el-button>
                    <el-button type="primary" icon="el-icon-success" size="mini" @click="addRecord">添加催收记录
                    </el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
    
<script>

import { viewDetails, getApplicantStatus } from '../../../api/finalTrial';
import { getClientInfo, getBillDetail, getBillOrders, getBillListInfo, getDictKeyInfo, getProductionInfo, addCollectRecord, getOperatorInfo, updateClientRemark } from '../../../api/collect/index';
import Dict from '../../../utils/dict/Dict';
import DictTag from "@/components/DictTag/index.vue";
import { format } from 'path';
import { formatDate } from '../../../utils';

export default {
    dicts: ['loan_info_applicant_status', 'loan_info_payment_method', 'loan_info_applicant_status'],
    components: { Dict, DictTag },
    data() {
        return {
            allData: [
                {
                    title: '个人信息',
                    data: [],
                    name: 123,

                }
            ],
            billListInfo: {

            },
            billOrders: {
            },
            billInfo: {
            },
            currentOperator: {},
            clientInfo: {},
            middelBillList: {},
            loading: false,
            addDialogStatus: false,
            addTextarea: '',
            addRemarkDialogStatus: false,
            addRemarkTextarea: '',
            progressStatus: '',
            activeNames: ['1'],
            production: {},
            client: {},
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                loanInfoId: undefined
            },
            newBillInfo: {
                actualPayment: '',
                actualPaymentTime: '',
                writeTime: '',
                collectLog: '',
                operatorId: 0,
                loanInfoId: 0,
                collectFinishTime: '',
                essentialPayment: 0,
                periodsPaymentStatus: 0,
                essentialPayDeadline: ''
            },
            newRemarkInfo: {
                clientId: 0,
                remark: ''
            }

        }
    },
    created() {
        const loanInfoId = this.$route.query.loanInfoId;
        if (loanInfoId) {
            this.queryParams.loanInfoId = loanInfoId;
            getClientInfo(this.queryParams.loanInfoId).then(res => {
                // console.log("res.data.id", res.data)
                this.client = res.data;
                this.getList();
            }).catch();
            let billId = this.$route.query.billId;

            getBillDetail(billId).then(res => {
                // console.log("催收数据：", res.data)
                this.billInfo = res.data;
            }).catch();

            getBillOrders(loanInfoId).then(res => {
                // console.log("催收记录数据：", res.data)
                this.billOrders = res.data;
            }).catch();

            getBillListInfo(loanInfoId).then(res => {
                this.billListInfo = res.data;
            }).catch();

            getProductionInfo(loanInfoId).then(res => {
                this.production = res.data;
            }).catch();

            getOperatorInfo(this.$store.state.user.name).then(res => {
                this.currentOperator = res.data;
            }).catch();
        }
    },
    watch: {
        billInfo(newVal) {
            getApplicantStatus("loan_info_applicant_status", newVal.applicantStatus).then(res => {
                // console.log("状态类型：", res.data)
                this.progressStatus = res.data;
            }).catch();
        },
        billListInfo(newVal) {

            getDictKeyInfo("bill_periods_payment_status").then(res => {
                let dictArray = res.data
                newVal.forEach(item => {
                    for (let i = 0; i < dictArray.length; i++) {
                        if (dictArray[i].dictValue == item.periodPaymentStatus) {
                            item.paymentStatus = dictArray[i].dictLabel
                        }
                    }
                })
            }).catch();
        },
        addTextarea(newVal) {
            this.newBillInfo.collectLog = newVal;
        },
        addRemarkTextarea(newVal) {
            this.newRemarkInfo.remark = newVal;
        }
    },
    methods: {
        getList() {
            viewDetails(this.client.id).then(res => {
                // console.log("字段数据", res)

                this.allData = res.data
                // console.log(this.allData)
            }).catch();
        },
        handleChange(val) {
            // console.log(val)
            this.middelBillList.forEach(item => {
                console.log("最初还款时间", item)
            });
        },
        goBack() {
            this.$router.go(-1)// 返回上一个页面
            //关闭子页面
            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
            this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path)
        },
        addRemark() {
            this.newRemarkInfo.clientId = this.$route.query.clientId;
            // this.newRemarkInfo.remark=null,
            this.addRemarkDialogStatus = true;
        },
        addRecord() {
            this.newBillInfo.actualPayment = null,
                this.newBillInfo.actualPaymentTime = null,
                this.newBillInfo.writeTime = formatDate(new Date());
            // this.newBillInfo.collectLog = this.addTextarea;
            this.newBillInfo.operatorId = this.currentOperator.userId;
            this.newBillInfo.loanInfoId = this.queryParams.loanInfoId;
            this.newBillInfo.collectFinishTime = formatDate(new Date());
            this.newBillInfo.essentialPayment = this.billInfo.essentialPayment;
            this.newBillInfo.periodsPaymentStatus = 1;
            this.newBillInfo.essentialPayDeadline = this.billInfo.essentialPayDeadline;
            this.addDialogStatus = true;
            console.log(this.currentOperator)
        },
        saveRecord() {
            // console.log(this.newBillInfo)
            addCollectRecord(this.newBillInfo).then(res => {
                if (res.code == 200) {
                    this.$notify({
                        message: res.msg,
                        type: 'success'
                    });
                }else{
                    this.$notify({
                        message: res.msg,
                        type: 'error'
                    });
                }
            }).catch();
            this.addDialogStatus = false;
            this.addTextarea = '';
            this.goBack();
        },
        saveRemark() {

            updateClientRemark(this.newRemarkInfo).then(res => {
                if (res.code == 200) {
                    this.$notify({
                        message: res.msg,
                        type: 'success'
                    });
                }else{
                    this.$notify({
                        message: res.msg,
                        type: 'error'
                    });
                }
            }).catch();
            this.addRemarkDialogStatus = false;
            this.addRemarkTextarea = '';
        }
    }
}
</script>
<style>
body>.el-container {
    margin-bottom: 40px;
    display: inline-block;
}

.fixed-button {
    position: fixed;
    right: 139px;
    bottom: 10px;
    padding: 8px;
    text-align: right;
}

#mainTitle {
    font-size: 40px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    float: left;
}

.title {
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #303133;
}

.con {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bolder;
    color: #303133;
}

.my-label {
    background: yellow;
}
</style>
    